<template>
  <div id="index_music">
    <header>
      <van-nav-bar :style="!searchShow ? 'background:#F6F6F6' : ''"
                   fixed
                   left-arrow
                   @click-left="onClickLeft">
        <template #left>
          <van-icon name="wap-nav"
                    :color="globalObj.normColor"
                    size="20px" />
        </template>
        <template #title
                  v-if="searchShow">
          <van-search shape="round"
                      :clearable="false"
                      v-model="seachValue"
                      placeholder=" "
                      @click="handldSearch">
            <template #left-icon>
              <van-icon name="search"
                        :color="globalObj.normColor" />
            </template>
            <template #right-icon> </template>
          </van-search>
        </template>
      </van-nav-bar>
    </header>
    <main class="music_content">
      <!-- 优化 -->
      <findIndex v-show="searchShow" />
      <meIndex v-show="!searchShow" />
    </main>
    <footer>
      <van-tabbar v-model="active"
                  @change="footerChange"
                  :active-color="globalObj.normColor">
        <van-tabbar-item icon="wap-home-o">发现</van-tabbar-item>
        <van-tabbar-item icon="user-o">我的</van-tabbar-item>
      </van-tabbar>
    </footer>

    <!-- 右侧弹窗 -->
    <leftPopup :popupDialog="popupDialog" />
  </div>
</template>

<script>
import findIndex from '@/views/find/findIndex'
import meIndex from '@/views/me/meIndex'
import leftPopup from '@/components/leftPopup'
export default {
  name: 'index_music',
  data() {
    return {
      active: 0,
      seachValue: '',
      searchShow: true,
      routerName: '',
      popupDialog: false,
    }
  },
  components: { findIndex, meIndex, leftPopup },
  methods: {
    // 打开搜索
    handldSearch() {
      this.$router.push('/hotSearch')
    },
    // 页面切换
    footerChange(index) {
      if (index === 1) {
        this.searchShow = false
      } else {
        this.searchShow = true
      }
    },
    // 打开侧边栏
    onClickLeft() {
      this.popupDialog = !this.popupDialog
    },
  },
}
</script>

<style scoped>
#index_music {
  width: 100%;
  height: 100%;
}
header [class*='van-hairline']::after {
  border: none;
}
footer [class*='van-hairline']::after {
  border: none;
}

#index_music .music_content {
  width: 100%;
  margin-top: 46px;
  margin-bottom: 50px;
}
#index_music /deep/ .van-hairline {
  border: none;
}
.van-search {
  padding: 0;
}
</style>